{extend name="layout/layout"}
{block name="content"}
<style>
	.pagination {
	    display: inline-block;
	    padding-left: 0;
	    margin: 20px 0;
	    border-radius: 4px;
	}
	.pagination > li {
	    display: inline;
	}
	.pagination  > a,
	.pagination  > span {
	    position: relative;
	    float: left;
	    padding: 6px 12px;
	    margin-left: -1px;
	    line-height: 1.42857143;
	    color: #F97A28;
	    text-decoration: none;
	    background-color: #fff;
	    /* border: 1px solid #ddd; */
	}
	.pagination > li:first-child > a,
	.pagination > li:first-child > span {
	    margin-left: 0;
	    border-top-left-radius: 4px;
	    border-bottom-left-radius: 4px;
	}
	.pagination > li:last-child > a,
	.pagination > li:last-child > span {
	    border-top-right-radius: 4px;
	    border-bottom-right-radius: 4px;
	}
	.pagination  > a:hover,
	.pagination  > span:hover,
	.pagination  > a:focus,
	.pagination  > span:focus {
	    z-index: 2;
	    color: #F97A28;
	    background-color: #eee;
	    border-color: #ddd;
	}
   .pagination > .active,
	.pagination > .active > a,
	.pagination > .active > span,
	.pagination > .active > a:hover,
	.pagination > .active > span:hover,
	.pagination > .active > a:focus,
	.pagination > .active > span:focus {
	    z-index: 3;
	    color: #fff;
	    cursor: default;
	    background-color: #F97A28;
	    border-color: #F97A28;
	}
	.pagination > .disabled > span,
	.pagination > .disabled > span:hover,
	.pagination > .disabled > span:focus,
	.pagination > .disabled > a,
	.pagination > .disabled > a:hover,
	.pagination > .disabled > a:focus {
	    color: #777;
	    cursor: not-allowed;
	    background-color: #fff;
	    border-color: #ddd;
	}
</style>
<main class="ticket">
    <div class="layui-main">

        <p class="mt30 mb30 ft-bold ft24">我的票券</p>
        <div class="bg_white ticket_b1">
            <div class="flex-center mb30">
                <ul class="ul_height ticket_ul1">
                     {volist name="statusMapping" id="vo"} 
                        <li>
                            <a class="item {$query.status == $vo.code ? 'layui-this' : ''}" href="/activity/user/ticket?status={$vo.code}">{$vo.text}({$vo.count|default=0})</a>
                        </li>
                     {/volist}
                </ul>
             </div>
            <ul class="ticket_ul2 w100 ul_height">
                {volist name="tickets" id="ticket"}
                <li class="w100">
                    <div class="item">
                        <div class="b1">
                           <div class="flex-1">
                              <p class="ft20 ft-bold mb5">【{$ticket.activity_info.type_name}】{$ticket.activity_info.name}
                              </p>
                              <p class="ft14 gary_c6">{$ticket.activity_info.begin_time} ~ {$ticket.activity_info.end_time}<br>
                                 訂單編號：{$ticket.sn}</p>
                           </div>
                           <div class="d-flex">
                              <div class="b1_btn">
                                 {if $ticket.price > 0} 
                                    <p class="gary_c9 ft14">订单金额 <span>{$ticket.price}</span> </p>
                                    {else /}
                                    <p class="ft16 mb5">免费</p>
                                 {/if} 
                                
                              </div>
                              <div class="b1_btn ft14 gary_c9">票卷咨询</div>
                           </div>
                    </div>
                        <table class="layui-table" lay-skin="nob">
                            <thead>
                            <tr>
                                <th>活动</th>
                                <th>期限</th>
                                <th>票號</th>
                                <th>單價</th>
                                <th>狀態</th>
                                <th>創建時間</th>
                                <th>操作選項</th>
                            </tr>
                            </thead>
                            <tbody>

                            <tr>
                                <td>{$ticket.activity_info.name}</td>
                                <td>{$ticket.activity_info.begin_time} - {$ticket.activity_info.end_time}</td>
                                <td>{$ticket.sn|default='-'}</td>
                                <td>{$ticket.price}</td>
                                <td>{$ticket.status_name} </td>
                                <td>{$ticket.create_time} </td>
                                <td class="orange_c">
                                  <a data-dialog="ticket" data-id='{$ticket.id}'>票券详情</a>
                                </td>
                            </tr>
                        
                            </tbody>
                        </table>
                </li>
                {/volist}
            </ul>
        </div>
    </div>
</main>
<div class="layui-hide">
    <div class="ticket_dia ">
        <p class="ft-bold ft24 t1">票券明細</p>
        <ul>
            <li class="item">
                <p class="t11">票券資訊</p>
                <p class="t12">票號:2311170725111866836035<br>票種:加拿大留學申請攻略線上講座<br>單價:$0<br>有效期限:2023-01-0</p>

            </li>
            <li class="item">
                <p class="t11">參加人資訊</p>
                <p class="t12">姓名:Phina Wang<br>電子郵件:heyyouphina@hotmail.com<br>行動電話:886972853882,88</p>
            </li>
            <li class="item">
                <p class="t11">联系主办单位</p>
                <p class="t12">TKB購課網x放洋留遊學<br>手機號碼：+886 985368799<br>Email：welcomein1314@gmail.com</p>
            </li>
            <li class="item">
                <p class="t11">票券明细</p>
                <p class="t12">加拿大留學申請攻略線上講座<span class="ml5 green_c"> 已使用</span></p>
            </li>
        </ul>
        <div class="b2">
            <button class="layui-btn layui-btn-lg layui-btn-primary layui-border" data-close>取消</button>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        // 选择所有具有 'active' 类的元素
        var $activeElements = $('.active');

        // 移除所有元素的 'active' 类
        $activeElements.removeClass('active');

        // 为最后一个元素添加 'active' 类
        $activeElements.last().addClass('active');
    });
    $(document).on('click', '[data-dialog="ticket"]', function () {
        var id = $(this).data('id');
        $.get('/activity/user/ticket/'+id+'.html', function (html) {
            layui.use(function () {
                var upload = layui.upload;
                var layer = layui.layer;
                var element = layui.element;
                var $ = layui.$;
                layer.open({
                    type: 1, // page 层类型
                    area: ['900px', '80%'],
                    title: false,
                    shade: 0.6, // 遮罩透明度
                    closeBtn: 0,
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    anim: 0, // 0-6 的动画形式，-1 不开启
                    content: html
                });
            })
        })



    })
    $(document).on('click', '[data-close]', function () {
        layer.closeAll()
    })

</script>
{/block}
